vue组件传值
撰写时间: 2019-09-10 总共: 1391 字 转载请注明: BY-SA 4.0(除特别声明或转载文章外)
vue父子组件传值
子组件定义props获取
父组件通过 prop 给子组件下发数据,子组件通过$emit触发事件给父组件发送消息,即 prop 向下传递,事件向上传递。
3个props方式:
(驼峰式命名的props属性需要在父组件用的时候改成用-来连接两个单词)
(比如 todoList --> todo-list)
1.
props: ['todoList']
2.
props: {
//这样可以指定传入的类型,如果类型不对,会警告
todoList: Array
}
3.
props: {
todoList: {
type: Array,
default: [0,0,0]
//这样可以指定默认的值
}
}
一个例子;
// 子组件里定义字段接受父组件传递的数值
// 然后直接使用就好了
<a @click="del(item.id)">-</a>
props:{
todoList:Array,
del:Function,
save:Function,
update:Function,
}
methods:{
del(id){
// 第一个参数是props里方法对应的函数属性,
// 后面跟上参数列表是父组件里需要的子组件传回的数据
// 实现子组件给父组件传递值
// 单向数据流的概念需要理解,
// 实际上是由父组件改变内容,子组件是触发这个改动
this.$emit('del',id);
},
saveCheck(){
this.$emit('save');
}
}
// 父组件使用,动态绑定给相应的数值类型就ok
//需要函数就传递函数
// 需要数组就传递数组,对象就对象
// todoList 需要更换成 todo-list
<TodoItem
:todo-list="notDoneList"
@del="delTodoItem"
@save="save"
@update="updateTodoItem"/>
// delTodoItem()等是父组件的方法
父组件主动获取子组件的数据和方法
1.调用子组件的时候给子组件定义一个ref
<todoitem ref="todoitem"/>
2.父组件通过
// 相当于操作 DOM
this.$refs.todoitem.属性
this.$refs.todoitem.方法
子组件主动获取父组件的数据和方法
this.$parent.属性
this.$parent.方法
非父子组件传值
建立公共Vue实例
// 新建一个js文件
// 创建一个Vue()实例
import Vue from 'vue';
var vm = new Vue();
export default vm;
在组件里通过对同一个事件进行监听和触发
传递数据
需要触发传递数据的组件
vm.$emit("自定义事件名","参数列表")
// 引入定义的vm 实例
import Vm from '../model/Vm.js';
// 在函数里使用
methods:{
vm_emit(){
Vm.$emit('function_name',this.数据...)
}
}
接收数据
需要用到数据的组件
vm.$on.("自定义事件名",callback)
// 引入定义的vm 实例
import Vm from '../model/Vm.js';
// 在监听function_name
// 创建一开始就监听
mounted:{
Vm.$on('function_name',function(data){
// ...使用数据
})
}